<template>
  <div class="page-container">
    <!--工具栏-->
    <div class="toolbar" style="float:left;padding-top:10px;padding-left:15px;">
      <el-form :inline="true" :model="filters" ref="filters" :size="size">
        <el-form-item prop="orderNumber">
          <el-input v-model="filters.orderNumber" placeholder="订单编号"></el-input>
        </el-form-item>
        <el-form-item prop="username">
          <el-input v-model="filters.username" placeholder="购买人"></el-input>
        </el-form-item>
        <el-form-item>
          <kt-button
            icon="fa fa-search"
            :label="$t('action.search')"
            type="primary"
            @click="findPage(null)"
          />
        </el-form-item>
        <el-form-item>
          <kt-button icon="fa fa-refresh" :label="$t('action.reset')" type="primary" @click="resetForm('filters')" />
        </el-form-item>
        <el-row>
          <el-form-item>
            <el-form-item>
              <kt-button label="确认收款" type="primary" @click="confirmMoney()" />
            </el-form-item>
            <kt-button label="确认订单" type="primary" @click="confirmOrder()" />
          </el-form-item>
          <el-form-item>
            <kt-button label="确认发货" type="primary" @click="sendGoods()" />
          </el-form-item>
          <el-form-item>
            <kt-button label="确认签收" type="primary" @click="confirmSignfor()" />
          </el-form-item>
          <el-form-item>
            <kt-button label="查看包裹列表" type="primary" @click="lookPackage()" />
          </el-form-item>
          <el-form-item>
            <kt-button label="取消订单" type="primary" @click="cancelOrder()" />
          </el-form-item>
          <el-form-item>
            <kt-button label="修改物流信息" type="primary" @click="editLogisticsInfo()" />
          </el-form-item>
          <el-form-item>
            <kt-button label="导出商品明细" type="primary" @click="downloadOrderDetailExcel()" />
          </el-form-item>
          <el-form-item>
            <kt-button label="导出订单明细" type="primary" @click="downloadOrderDetailExcel()" />
          </el-form-item>
        </el-row>
      </el-form>
    </div>
    <div class="toolbar" style="float:right;padding-top:10px;padding-right:15px;">
      <el-form :inline="true" :size="size">
        <el-form-item>
          <el-button-group>
            <el-tooltip content="刷新" placement="top">
              <el-button icon="fa fa-refresh" @click="findPage(null)"></el-button>
            </el-tooltip>
            <el-tooltip content="列显示" placement="top">
              <el-button icon="fa fa-filter" @click="displayFilterColumnsDialog"></el-button>
            </el-tooltip>
          </el-button-group>
        </el-form-item>
      </el-form>
      <!--表格显示列界面-->
      <table-column-filter-dialog
        ref="tableColumnFilterDialog"
        :columns="columns"
        @handleFilterColumns="handleFilterColumns"
      ></table-column-filter-dialog>
    </div>
    <!--表格内容栏-->
    <cy-table
      :height="350"
      :data="pageResult"
      :columns="filterColumns"
      :showEditOperation="false"
      :showBatchDelete="false"
      :showDeleteOperation="false"
      :showDetailOperation="true"
      @findPage="findPage"
      @selectionChange="selectionChange"
      @handleDetail="handleDetail"
      ref="CyTable"
    ></cy-table>

    <!--确认订单-->
    <el-dialog
      title="确认订单"
      width="30%"
      :visible.sync="dialogVisibleOrder"
      :close-on-click-modal="false"
    >
      <el-form
        :model="dataFormOrder"
        label-width="80px"
        ref="dataFormOrder"
        :size="size"
        label-position="right"
        :rules="dataFormOrderRules"
      >
        <el-form-item label="ID" prop="id" v-if="false">
          <el-input v-model="dataFormOrder.id" :disabled="true" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="订单编号" prop="number">
          <el-input
            v-model="dataFormOrder.number"
            style="width: 214.5px"
            auto-complete="off"
            :disabled="true"
          ></el-input>
        </el-form-item>
        <el-form-item label="应付金额" prop="pay_money">
          <el-input v-model="dataFormOrder.pay_money" style="width: 214.5px" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="订单支付总金额" prop="order_money">
          <el-input v-model="dataFormOrder.order_money" style="width: 214.5px" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="订单状态" prop="status">
          <el-select v-model="dataFormOrder.status" style="width: 214.5px">
            <el-option v-for="item in listStatus" :key="item.id" :label="item.val" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button :size="size" @click.native="dialogVisibleOrder = false">{{$t('action.cancel')}}</el-button>
        <el-button
          :size="size"
          type="primary"
          @click.native="submitFormOrder"
          :loading="editLoading"
        >{{$t('action.submit')}}</el-button>
      </div>
    </el-dialog>

    <!--取消订单-->
    <el-dialog
      title="取消订单"
      width="30%"
      :visible.sync="dialogVisibleCancelOrder"
      :close-on-click-modal="false"
    >
      <span>确认取消订单号为:{{orderNumber}}的订单吗</span>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button
          :size="size"
          @click.native="dialogVisibleCancelOrder = false"
        >{{$t('action.cancel')}}</el-button>
        <el-button
          :size="size"
          type="primary"
          @click.native="cancelYesOrder"
          :loading="editLoading"
        >确定</el-button>
      </div>
    </el-dialog>

    <!--订单详情-->
    <el-dialog
      title="订单详情"
      width="80%"
      :visible.sync="dialogVisibleOrderDetail"
      :close-on-click-modal="false"
    >
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="number" label="订单编号"></el-table-column>
        <el-table-column prop="shopname" label="所属店铺"></el-table-column>
        <el-table-column prop="productname" label="产品名称"></el-table-column>
        <el-table-column prop="reciever" label="收件人"></el-table-column>
        <el-table-column prop="reciever_tel" label="收件人手机号" width="180"></el-table-column>
        <el-table-column prop="address" label="收货人地址" width="180"></el-table-column>
        <el-table-column prop="coupon_money" label="优惠券抵扣金额" width="180"></el-table-column>
        <el-table-column prop="product_num" label="商品数量"></el-table-column>
        <el-table-column prop="product_price" label="购买时单价" width="180"></el-table-column>
        <el-table-column prop="order_money" label="订单支付总金额" width="180"></el-table-column>
        <el-table-column prop="tms_money" label="运费金额"></el-table-column>
        <el-table-column prop="pay_money" label="应付金额"></el-table-column>
        <el-table-column prop="integral" label="订单支付积分" width="180"></el-table-column>
        <el-table-column prop="send_time" label="发货时间"></el-table-column>
        <el-table-column prop="tms_type_val" label="物流类型"></el-table-column>
        <el-table-column prop="tms_number" label="物流编号"></el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer" style="text-align:center">
        <el-button :size="size" @click.native="dialogVisibleOrderDetail = false">返回</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import PopupTreeInput from "@/components/PopupTreeInput";
import CyTable from "@/views/Core/CyTable";
import KtButton from "@/views/Core/KtButton";
import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";
import { format } from "@/utils/datetime";
import utils from "@/assets/js/utils.js";
export default {
  components: {
    PopupTreeInput,
    CyTable,
    KtButton,
    TableColumnFilterDialog
  },
  data() {
    return {
      size: "small",
      readonly: true,
      list: [],
      listStatus: [],
      tableData: [],
      orderNumber: "", //订单号
      filters: {
        orderNumber: "",
        username: "",
        t: "order"
      },
      columns: [],
      checked: [],
      filterColumns: [],
      filterOrderDetailColumns: [
        { prop: "number", label: "主订单编号", minWidth: 120 },
        { prop: "sonnumber", label: "子订单编号", minWidth: 120 },
        { prop: "username", label: "购买人", minWidth: 120 },
        { prop: "shopname", label: "店铺名称", minWidth: 120 },
        { prop: "productName", label: "产品名称", minWidth: 120 },
        { prop: "reciever", label: "收货人", minWidth: 120 },
        { prop: "reciever_tel", label: "收货人电话", minWidth: 120 },
        { prop: "address", label: "收货人地址", minWidth: 120 },
        { prop: "order_money", label: "订单金额", minWidth: 120 },
        { prop: "pay_money", label: "应付金额", minWidth: 120 },
        { prop: "tms_money", label: "运费金额", minWidth: 120 },
        { prop: "integral", label: "订单支付积分", minWidth: 120 },
        { prop: "send_time", label: "发货时间", minWidth: 120 },
        { prop: "tms_number", label: "物流单号", minWidth: 120 },
        { prop: "tms_type", label: "物流类型", minWidth: 120 }
      ], //订单导出明细列
      pageRequest: { pageNum: 1, pageSize: 10 },
      pageResult: {},

      operation: false, // true:新增, false:编辑
      dialogVisible: false, // 新增编辑界面是否显示
      dialogVisibleOrder: false, // 确认订单显示
      dialogVisibleCancelOrder: false, //取消订单显示
      dialogVisibleOrderDetail: false, //订单详情显示
      editLoading: false,
      // 新增编辑界面数据
      dataForm: {
        shop_id: ""
      },
      //确认订单
      dataFormOrder: {
        id: "",
        pay_money: "",
        order_money: "",
        status: "",
        number: ""
      },
      dataFormOrderRules: {
        order_money: [
          { required: true, message: "订单支付总金额", trigger: "blur" }
        ],
        pay_money: [{ required: true, message: "应付金额", trigger: "blur" }],
        status: [{ required: true, message: "请选择订单状态", trigger: "blur" }]
      }
    };
  },

  methods: {
    // 获取分页数据
    findPage: function(data) {
      this.$refs.CyTable.findPage(this.filters);
    },
    // 订单状态初始化
    queryUserList() {
      var that = this;
      let params = {};
      params.t = "sysConfig";
      params.type = "order_status";
      this.utils.request.queryUserList(params, function(data) {
        that.listStatus = data.data;
      });
    },

    //订单明细导出
    downloadOrderDetailExcel() {
      this.$confirm("确定下载列表文件?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let filename = "订单明细导出";
          let params = {};
          params.t = "order";
          params.sql = "queryOrderDetail";
          this.$refs.CyTable.exportData(
            params,
            this.filterOrderDetailColumns,
            filename
          );
        })
        .catch(() => {});
    },

    // 时间格式化
    dateFormat: function(row, column, cellValue, index) {
      return format(row[column.property]);
    },
    // 处理表格列过滤显示
    displayFilterColumnsDialog: function() {
      this.$refs.tableColumnFilterDialog.setDialogVisible(true);
    },
    // 处理表格列过滤显示
    handleFilterColumns: function(data) {
      this.filterColumns = data.filterColumns;
      this.$refs.tableColumnFilterDialog.setDialogVisible(false);
    },
    // 处理表格列过滤显示
    initColumns: function() {
      this.columns = [
        { prop: "number", label: "订单编号", minWidth: 120 },
        { prop: "memberName", label: "购买人", minWidth: 120 },
        { prop: "pay_type", label: "付款方式", minWidth: 120 },
        { prop: "order_money", label: "订单支付总金额", minWidth: 150 },
        { prop: "pay_money", label: "应付金额", minWidth: 150 },
        { prop: "tms_money", label: "运费金额", minWidth: 120 },
        { prop: "integral", label: "所需积分", minWidth: 120 },
        { prop: "coupon_money", label: "优惠券抵扣金额", minWidth: 150 },
        {
          prop: "exchange_certificate_money",
          label: "兑换券抵扣金额",
          minWidth: 150
        },
        { prop: "statusName", label: "状态", minWidth: 120 },
        { prop: "create_time", label: "创建时间", minWidth: 120 }
      ];
      var temp = [];
      $.each(this.columns, function(key, val) {
        temp.push(val);
      });
      this.filterColumns = temp;
    },
    //重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.findPage();
    },
    //选择框
    selectionChange: function(params) {
      this.checked = params.selections;
    },
    setStaus() {
      if (this.checked.length == 1) {
        let this_ = this;
        this_.dialogVisible = true;
        this_.dataForm = this_.checked[0];
      } else {
        this.$message({
          message: "审核只能选择一条数据",
          type: "error"
        });
      }
    },

    //确认收款
    confirmMoney() {
      if (this.checked.length == 1 && this.checked[0].status == "50") {
        let this_ = this;
        let params = {};
        params.t = "order";
        params.id = this.checked[0].id;
        params.status = "51";
        this.utils.request.editUserInfo(params, function(data) {
          if (data.code == "0000") {
            this_.$message({ message: "操作成功", type: "success" });
            this_.dialogVisibleOrder = false;
            this_.editLoading = false;
            this_.findPage();
          } else {
            this_.$message({
              message: "操作失败, " + data.msg,
              type: "error"
            });
          }
        });
      } else {
        this.$message({
          message: "确认收款只能选择状态为待支付的数据",
          type: "error"
        });
      }
    },
    //确认订单
    confirmOrder() {
      if (this.checked.length == 1) {
        let this_ = this;
        this_.dialogVisibleOrder = true;
        this_.dataFormOrder.id = this_.checked[0].id;
        this_.dataFormOrder.number = this_.checked[0].number;
        this_.dataFormOrder.order_money = this_.checked[0].order_money;
        this_.dataFormOrder.pay_money = this_.checked[0].pay_money;
        this_.dataFormOrder.status = this_.checked[0].status;
      } else {
        this.$message({
          message: "确认订单只能选择一条数据",
          type: "error"
        });
      }
    },

    //确认发货
    sendGoods() {
      if (this.checked.length == 1 && this.checked[0].status == "51") {
        let this_ = this;
        let params = {};
        params.t = "order";
        params.id = this.checked[0].id;
        params.status = "52";
        this.utils.request.editUserInfo(params, function(data) {
          if (data.code == "0000") {
            this_.$message({ message: "操作成功", type: "success" });
            this_.dialogVisibleOrder = false;
            this_.editLoading = false;
            this_.findPage();
          } else {
            this_.$message({
              message: "操作失败, " + data.msg,
              type: "error"
            });
          }
        });
      } else {
        this.$message({
          message: "确认发货只能选择状态为待发货的数据",
          type: "error"
        });
      }
    },

    //确认签收
    confirmSignfor() {
      if (this.checked.length == 1 && this.checked[0].status == "52") {
        let this_ = this;
        let params = {};
        params.t = "order";
        params.id = this.checked[0].id;
        params.status = "53";
        this.utils.request.editUserInfo(params, function(data) {
          if (data.code == "0000") {
            this_.$message({ message: "操作成功", type: "success" });
            this_.dialogVisibleOrder = false;
            this_.editLoading = false;
            this_.findPage();
          } else {
            this_.$message({
              message: "操作失败, " + data.msg,
              type: "error"
            });
          }
        });
      } else {
        this.$message({
          message: "确认签收只能选择状态为已发货的数据",
          type: "error"
        });
      }
    },

    //查看包裹列表
    lookPackage() {
      if (this.checked.length == 1) {
      } else {
        this.$message({
          message: "请选择一条数据",
          type: "error"
        });
      }
    },

    //取消订单
    cancelOrder() {
      if (this.checked.length == 1) {
        let this_ = this;
        if (this.checked[0].status == "54") {
          this.$message({
            message: "订单已取消，不可重复取消",
            type: "error"
          });
          return;
        }
        this_.dialogVisibleCancelOrder = true;
        this_.orderNumber = this_.checked[0].number;
      } else {
        this.$message({
          message: "请选择一条数据",
          type: "error"
        });
      }
    },
    cancelYesOrder() {
      let params = {};
      let this_ = this;
      params.id = this_.checked[0].id;
      this.utils.request.deleteOrder(params, function(data) {
        if (data.code == "0000") {
          this_.$message({ message: "操作成功", type: "success" });
          this_.dialogVisibleCancelOrder = false;
          this_.editLoading = false;
          this_.findPage();
        } else {
          this_.$message({
            message: "操作失败, " + data.msg,
            type: "error"
          });
        }
      });
    },

    //修改物流信息
    editLogisticsInfo() {
      if (this.checked.length == 1) {
      } else {
        this.$message({
          message: "请选择一条数据",
          type: "error"
        });
      }
    },
    submitFormOrder() {
      let this_ = this;
      this.$refs.dataFormOrder.validate(valid => {
        if (valid) {
          this.$confirm("确认提交吗？", "提示", {}).then(() => {
            this.editLoading = true;
            let params = Object.assign({}, this.dataFormOrder);
            params.t = "order";
            this.utils.request.editUserInfo(params, function(data) {
              if (data.code == "0000") {
                this_.$message({ message: "操作成功", type: "success" });
                this_.dialogVisibleOrder = false;
                this_.editLoading = false;
              } else {
                this_.$message({
                  message: "操作失败, " + data.msg,
                  type: "error"
                });
              }
              this_.findPage();
            });
          });
        }
      });
    },
    submitForm() {
      let this_ = this;
      this.$refs.dataForm.validate(valid => {
        if (valid) {
          this.$confirm("确认提交吗？", "提示", {}).then(() => {
            this.editLoading = true;
            let params = Object.assign({}, this.dataForm);
            params.t = "order";

            this.utils.request.editUserInfo(params, function(data) {
              if (data.code == "0000") {
                this_.$message({ message: "操作成功", type: "success" });
                this_.dialogVisible = false;
                this_.editLoading = false;
              } else {
                this_.$message({
                  message: "操作失败, " + data.msg,
                  type: "error"
                });
              }
              this_.findPage();
            });
          });
        }
      });
    },
    // 批量删除
    handleDelete: function(data) {
      var ids = "";
      for (var i = 0; i < data.params.length; i++) {
        ids = ids + data.params[i].id + ",";
      }
      data.t = "order";
      data.ids = ids;
      this.utils.request.deleteUserInfo(data, data.callback);
    },
    //订单详情
    handleDetail(data) {
      let this_ = this;
      this.dialogVisibleOrderDetail = true;
      let param = {};
      param.t = "order";
      param.sql = "queryOrderSubByPid";
      param.pid = data.row.id;
      this.utils.request.queryUserList(param, function(data) {
        if (data.data != null) {
          this_.tableData = data.data;
        } else {
          this_.tableData = {};
        }
      });
    }
  },
  mounted() {
    this.initColumns();
    this.queryUserList();
  }
};
</script>

<style scoped>
/deep/ .el-input--small .el-input__inner{
    height: 32px;
}
</style>s